<template>
    <div class="feedback-container">
        <SearchWrap
            ref="searchRef"
            @search="handleSearch"
        ></SearchWrap>
        <!-- <el-button class="mar-b20" type="primary" @click="handleRow('add', {})">+新增</el-button> -->
        <TableWrap
            :hide-header="true"
            :total="pageInfo.total"
            :loading="data.loading"
            :table-data="data.tableData"
            v-model:page-size="pageInfo.pageSize"
            v-model:page-index="pageInfo.pageIndex"
            @request-list="getList">
                <el-table-column label="序号" fixed="left" align="center" width="80" show-overflow-tooltip>
                    <template #default="scope">
                        <div>{{(pageInfo.pageIndex - 1 )*pageInfo.pageSize+scope.$index+1}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="dtBrandName" label="品牌" min-width="100" show-overflow-tooltip/>
                <el-table-column prop="userId" label="账号ID" min-width="200"/>
                <el-table-column prop="realName" label="姓名"  min-width="65" show-overflow-tooltip/>
                <el-table-column prop="mobile" label="注册手机"  min-width="135" show-overflow-tooltip/>
                <el-table-column prop="accountTypeName" label="账号类型"  min-width="95"/>
                <el-table-column prop="clientIdName" label="意见反馈渠道"  min-width="105"/>
                <el-table-column prop="gmtCreate" label="意见反馈时间"  min-width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ dayjs(scope.row.gmtCreate).format('YYYY-MM-DD HH:mm:ss') }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="意见详情"  min-width="150" show-overflow-tooltip/>
                <el-table-column prop="comments" label="备注"  min-width="100" show-overflow-tooltip>
                    <template #default="scope">
                        {{scope.row.comments}}
                        <!-- <div>
                            <el-icon class="pointer" @click="handleRow('comments', scope.row)" :size="20">
                                <Edit v-if="scope.row.comments" />
                                <CirclePlus v-else/>
                            </el-icon>
                            {{scope.row.comments}}
                        </div> -->
                    </template>
                </el-table-column>
                <el-table-column prop="statusName" label="处理状态"  min-width="100">
                    <template #default="scope">
                        <el-tag class="handle-status-tag" v-if="scope.row.status === 1" effect="dark" color="#f50">{{scope.row.statusName}}</el-tag>
                        <el-tag class="handle-status-tag" v-if="scope.row.status === 2" effect="dark" color="#87d068">{{scope.row.statusName}}</el-tag>
                        <el-tag class="handle-status-tag" v-if="scope.row.status === 3" effect="dark" color="grey">{{scope.row.statusName}}</el-tag>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="操作" width="250" fixed="right">
                    <template v-slot="scope">
                        <el-popover
                            popper-class="option-popover-wrap"
                            placement="bottom"
                            :width="80"
                            trigger="hover">
                            <template #reference>
                                <el-button type="text">标记状态</el-button>
                            </template>
                            <div class="option-drop-menu-wrap">
                                <el-button class="option-btn" :disabled="scope.row.status === 1" @click="handleRow('status', scope.row, 1)">待处理</el-button>
                                <el-button class="option-btn" :disabled="scope.row.status === 3" @click="handleRow('status', scope.row, 3)">处理中</el-button>
                                <el-button class="option-btn" :disabled="scope.row.status === 2" @click="handleRow('status', scope.row, 2)">已处理</el-button>
                            </div>
                        </el-popover>
                        <span>
                            <el-divider direction="vertical"></el-divider>
                        </span>
                        <el-button v-if="scope.row.replyStatus === 0" type="primary" link @click="handleRow('reply', scope.row)">回复</el-button>
                        <el-button v-else type="primary" link @click="handleRow('replyRecord', scope.row)">回复记录</el-button>
                    </template>
                </el-table-column> -->
        </TableWrap>
        <CommentsDialog
            v-model:model-value ="CommentsOption.visible"
            :model-type="CommentsOption.type"/>
    </div>
</template>

<script setup>
import SearchWrap from './part/search.vue';
import TableWrap from '@/components/table-wrap/table-wrap.vue';
import CommentsDialog from './part/comments-dialog.vue';
import dayjs from 'dayjs';
// import { Edit, CirclePlus } from '@element-plus/icons-vue';
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

// 列表数据
let data = reactive({
    loading: false,
    tableData: [],
    currentNode: {}
});

// 分页数据
let pageInfo = reactive({
    total: 0,
    pageSize: 10,
    pageIndex: 1
})

// 筛选组件
let searchRef = ref(null);

// 备注或者回复组件
let CommentsOption = reactive({
    visible: false,
    type: 'comments' // comments 备注 reply 回复
});

// 获取列表数据
function getList () {
    let filterInfo = searchRef.value.getFilterInfo();
    store.dispatch('proxyAction', {
        name: 'listFeedbacks',
        data: {
            pageSize: pageInfo.pageSize,
            pageIndex: pageInfo.pageIndex,
            ...filterInfo
        }
    }).then((res) => {
        data.tableData = res.data.rows || [];
        pageInfo.total = res.data.total;
    }).finally(() => {
        data.loading = false;
    })
}

// 搜索
function handleSearch () {
    resetPane();
}

// 处理列表数据
function handleRow (type, info) {
    data.currentNode = info;
    switch(type) {
         case 'comments':
            CommentsOption.type = 'comments';
            CommentsOption.visible = true;
            break
        case 'status':
            break
        case 'reply':
            CommentsOption.type = 'reply';
            CommentsOption.visible = true;
            break
        case 'replyRecord':
            break

    }
}

// 重置列表
function resetPane () {
    pageInfo.pageIndex = 1;
    getList();
}

// 初始化数据
onMounted(() => {
    resetPane();
})


</script>

<style lang="scss" scoped>
.feedback-container {
    min-height: calc(100vh - 200px);
    padding: 20px;
    .mar-b20 {
        margin-bottom: 20px;
    }
    .handle-status-tag {
        border: none;
    }
}
.option-drop-menu-wrap {
    .option-btn {
        border: none;
        height: 30px;
        width: 100%;
        border-radius: 0;
        padding: 0;
        text-align: center;
        margin: 0;
        &:hover {
            background-color: transparent;
        }
    }
}
</style>

<style>
.option-popover-wrap.el-popover {
    min-width: 100px;
}
</style>